<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>读取github用户信息</title>
    <script src="vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <h1 style="text-align:center;">读取Github用户信息</h1>
        <hr>
    <div id="app">
       <div  style="width:800px; margin:0 auto">
            <form  class="form-inline"  @submit.prevent="ShowInfo">
                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">输入github用户名：</div>
                        <input class="form-control"  placeholder="fakerv587"  id="username" type="text" v-model="username">
                    </div>    
                    <button class="btn" id="btn">获取用户信息</button>
                </div>
            </form>
            <div id="information_area">
                        <img v-bind:src="result.avatar_url">
                            <ul class="list-group">
                                <li class="usernames">用户名：{{result.login}}</li>
                                <li class="information">介绍：{{result.bio}}</li>
                                <li class="blog">博客：{{result.blog}}</li>
                                <li class="nikename">姓名：{{result.name}}</li>
                                <li class="location">地址：{{result.location}}</li>
                                <li class="company">公司/学校：{{result.company}}</li>
                                <li class="follower">followers：{{result.followers}}</li>
                                <li class="following">following：{{result.following}}</li>
                                <li class="ctime">账户创建时间：{{result.created_at}}</li>
                                <li class="utime">最后一次更新时间：{{result.updated_at}}</li>
                            </ul>
            </div>
        </div>
<!-- ---------------------------------------------------------------------------------- -->
    <script>
        var APIData;
       //用户名 默认fakerv587
        var input_username = "fakerv587"; 
        var app = new Vue({
            el: '#app',
            data:{
                    username:"fakerv587",
                    result:[]
            },
            methods:{
                ShowInfo:function(){
                    axios
                        .get("https://api.github.com/users/"+this.username)
                        .then(function(response) {
                            app.result = response.data;
                            console.log(response.data);
                        })
                        .catch(function(error){
                            console.log(error);
                        })
                }
            }
        })                
    </script>
</body>
</html>